import {Col, Row} from 'antd';
import {useEffect, useState} from "react";
import {RightOutlined} from "@ant-design/icons";
import {detail} from "./service";
import styles from './index.less';
import MyIcon from "@/components/MyIcon";
import Ad from "@/pages/news/components/Ad";
import ContentRenderer from "@/components/ContentRenderer";
import FullAd from "@/components/Ad/FullAd";
import {useParams} from "@@/exports";

import SeoHead from "@/components/SeoHead";

export default () => {
  const [data, setData] = useState<Record<string, any>>({});
  const params = useParams();
  useEffect(() => {
    detail(params).then(result => {
      setData(result.data);
    })
  }, []);
  return (
    <>
      <SeoHead
        title={data.name}
        description={data.memo}
        keywords="Ant Design Pro, React, SEO"
        image={data.image}
        url={`http://localhost:8000/news/product/${data.id}`}
      />
      <Row>
        <Col span={2}/>
        <Col span={20}>
          <Row gutter={16}>
            <Col span={8}>
              <div className={styles.siteico}>
                <img alt={data.name} className={styles.ico} src={data.image}/>
              </div>
            </Col>
            <Col span={8}>
              <div className={styles.titleInfo}>
                {
                  (data.productCategoriesNames || []).map((item:Record<string, any>, index:number) => (
                    <a key={index} className={styles.tag} href={item.url}>{item.name}</a>
                  ))
                }
                <div className={styles.contentInfo}>
                  <p className={styles.memo}>{data.memo}</p>
                  标签：<span>
                          {
                            (data.productCategoriesNames || []).map((item:Record<string, any>, index:number) => (
                              <a key={index} style={{
                                color: '#282a2d',
                              }} href={item.url} rel="tag">{item.name}</a>
                            ))
                          }
                          </span>
                  <div style={{
                    marginTop: 16,
                  }}>
                            <span>
                              <a style={{
                                marginBottom: 10,
                                cursor: 'pointer',
                                color: '#444',
                                borderRadius: 6,
                                padding: '8px 16px',
                                background: 'rgba(138,138,138,.15)',
                                transition: '.3s',
                              }} href={data.url}
                                 title="C-Eval" target="_blank" rel="noopener noreferrer nofollow">
                                <span style={{marginRight:8}}>访问官网</span>
                                <RightOutlined/>
                              </a>
                            </span>
                    <a style={{
                      marginLeft:16,
                      color: '#666',
                      borderRadius: 4,
                      background: 'rgba(136,136,136,.1)',
                      transition: '.2s',
                      padding:'8px 16px',
                      display: 'inline-block',

                    }} href={data.url}
                       title="C-Eval" target="_blank" rel="noopener noreferrer nofollow">
                      <MyIcon type='icon-a-ziyuan692' />
                    </a>
                  </div>
                </div>
              </div>
            </Col>
            <Col span={8}>

            </Col>
          </Row>
          <Ad type='image' url='https://dis.csqixiang.cn/unpo/jimengaibot.html' image='https://ai-bot.cn/wp-content/uploads/2025/07/jimeng-ai-banner-0730.png' />
          <ContentRenderer html={data.content || ''} />
        </Col>
      </Row>
      <FullAd type='url' url='https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7941312752144276&output=html&h=280&slotname=7669768074&adk=3166925071&adf=1737958929&pi=t.ma~as.7669768074&w=1110&abgtt=6&fwrn=4&fwrnh=100&lmt=1754791737&rafmt=1&format=1110x280&url=https%3A%2F%2Fai-bot.cn%2Fsites%2F5433.html&fwr=0&fwrattr=true&rpe=1&resp_fmts=3&wgl=1&uach=WyJXaW5kb3dzIiwiMTkuMC4wIiwieDg2IiwiIiwiMTM5LjAuMzQwNS44NiIsbnVsbCwwLG51bGwsIjY0IixbWyJOb3Q7QT1CcmFuZCIsIjk5LjAuMC4wIl0sWyJNaWNyb3NvZnQgRWRnZSIsIjEzOS4wLjM0MDUuODYiXSxbIkNocm9taXVtIiwiMTM5LjAuNzI1OC42NyJdXSwwXQ..&dt=1754791736142&bpp=1&bdt=69&idt=53&shv=r20250805&mjsv=m202508050101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D48ecad0f06cf6f6e%3AT%3D1754370184%3ART%3D1754791735%3AS%3DALNI_MbZ4gkf44ZMoZYgvqx7gGCiqX4obA&gpic=UID%3D00001100aad25d64%3AT%3D1754370184%3ART%3D1754791735%3AS%3DALNI_MbQ_7Dboj0XOdCGiUwRYvyOYLtRhw&eo_id_str=ID%3D73e8aaca309ae459%3AT%3D1754370184%3ART%3D1754791735%3AS%3DAA-AfjZ_kO8cvUXtToZ5F-wLmLiK&prev_fmts=0x0%2C393x280&nras=1&correlator=2528262313498&frm=20&pv=1&u_tz=480&u_his=3&u_h=1440&u_w=2560&u_ah=1440&u_aw=2560&u_cd=24&u_sd=1&dmc=8&adx=829&ady=4789&biw=2547&bih=1362&scr_x=0&scr_y=0&eid=42532524%2C95362655%2C95368228%2C95368938%2C95359265&oid=2&psts=AOrYGsls9S_hb3zD9Ap2grqPSaNjdc3oODtNDexzK2prr6f7CnfvXm4hCT4GXtbD-Wanf99qhKmns5lcLVGtKeoGoci79A&pvsid=8597672695567335&tmod=270921390&uas=0&nvt=3&fc=1920&brdim=1710%2C3%2C1710%2C3%2C2560%2C0%2C2554%2C1434%2C2552%2C1362&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&bz=1&td=1&tdf=2&psd=W251bGwsbnVsbCxudWxsLDFd&nt=1&ifi=3&uci=a!3&btvi=1&fsb=1&dtd=1570'/>

    </>
  )
}
